import axios from 'axios'
import {
  Loading
} from 'element-ui'
// import qs from 'qs';
import store from '../store/index'
import router from '../router/index'
import {
  SET_TOKEN,
  DESTROY_TOKEN,
  DESTROY_ACCESS_TOKEN,
  SHOW_ERROR_MSG
} from '../store/mutation-types'

// axios 配置
axios.defaults.timeout = 5000
// axios.defaults.baseURL = 'api/'
//用来处理刷新token后重新请求的自定义变量
axios.defaults.isRetryRequest = false

//刷新token的请求方法 TODO
function getRefreshToken() {
  // //refresh_token使用vuex存在本地的localstorage，之后会详细说
  // let refreshToken = store.state.token.refreshToken;
  // //qs的使用主要是因为该接口需要表单提交的方式传数据，具体使用方法自行百度
  // return axios.post('oauth/token', qs.stringify(params));
  let refreshToken = store.state.token.refreshToken;
  return axios
    .post("/api/admin/refreshToken", {
      "header": {
        "sysCode": "IDS",
        "platform": window.navigator.platform,
        "timestamp": new Date().getTime()
      }
    }, {
      headers: {
        'Authorization': `Bearer ${refreshToken}`
      },
      isRetryRequest: true
    });
}

// http request 拦截器
var loadinginstace;
axios.interceptors.request.use(
  config => {
    console.log(`hmx^^^^|request|${JSON.stringify(config)}`);
    //获取储存在本地的token值
    let accessToken = store.state.token.accessToken;
    // let refreshToken = store.state.token.refreshToken;
    //这边可根据自己的需求设置headers
    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`
    } else {
      // config.headers.Authorization = `Bearer ${refreshToken}`
    }

    //这是element-ui的效果，全页面遮罩，中间带有加载圈
    loadinginstace = Loading.service({
      fullscreen: true
    })
    return config
  },
  err => {
    //这边是参考上面的链接的，具体有什么用我目前还没测到，反正加载超时不是在这边显示
    loadinginstace.close()
    store.commit(SHOW_ERROR_MSG, {
      message: '请求超时。'
    });
    return Promise.reject(err)
  }
);

// http response 拦截器
axios.interceptors.response.use(
  response => {
    console.log(`hmx^^^^|response|${JSON.stringify(response)}`);
    //关闭遮罩层，非常重要，不然页面都不能操作了！
    loadinginstace.close();
    return response
  },
  err => {
    if (err.response) {
      switch (err.response.status) {
        case 401:
          let config = err.config;
          //用vuex删除token
          store.commit(DESTROY_ACCESS_TOKEN);
          //判断是否已经刷新过token
          if (!config.isRetryRequest) {
            return getRefreshToken()
              .then(function (result) {
                console.log(result);
                //用vuex重新设置基本信息
                store.commit(SET_TOKEN, {
                  token: {
                    ...result.data.results,
                    refresh_token: store.state.token.refreshToken
                  }
                });
                // //修改flag
                // config.isRetryRequest = true;
                //修改原请求的token
                let accessToken = store.state.token.accessToken;
                config.headers.Authorization = `Bearer ` + accessToken;
                // /*这边不需要baseURL是因为会重新请求url
                //  *url中已经包含baseURL的部分了
                //  *如果不修改成空字符串，会变成'api/api/xxxx'的情况*/
                // config.baseURL = '';
                //重新请求
                return axios(config);
              })
              .catch(function (err) {
                console.log(err);
                //刷新token失败只能跳转到登录页重新登录
                store.commit(DESTROY_TOKEN);
                router.replace({
                  name: 'Login'
                });
                throw err;
              });
          }
          break;
      }
    } else {
      store.commit(SHOW_ERROR_MSG, {
        message: '请求超时。'
      });
    }
    loadinginstace.close();
    return Promise.reject(err)
  }
);

export default axios
